<template>
    <div class="Comment">
        <div class="info">
            <div class="summary">
                <div class="overall">{{ props.hotComment.overall }}</div>
                <div class="otherComment">
                    <div class="scoreTitle">{{ props.hotComment.scoreTitle }}</div>
                    <div class="totalCount">{{ props.hotComment.totalCount }}条评论</div>
                    <div class="star">
                        <van-rate v-model="starValue" readonly allow-half size="10px" color="var(--primary-color)" />
                    </div>
                </div>
            </div>
            <div class="summaryTag">
                <template v-for="(item, index) in props.hotComment.subScoresFocus" :key="index">
                    <div class="item2">{{ item.text }}</div>
                </template>
            </div>
        </div>
        <div class="tag">
            <template v-for="(item, index) in props.hotComment.commentTagVo" :key="index">
                <div class="item" :style="{ color: item.color, backgroundColor: item.backgroundColor }">{{ item.text }}
                </div>
            </template>
        </div>
        <div class="comment">
            <div class="user">
                <div class="img">
                    <img :src="props.hotComment.comment.userAvatars" alt="">
                </div>
                <div class="name">
                    <div class="userName">{{ props.hotComment.comment.userName }}</div>
                    <div class="time">{{ props.hotComment.comment.checkInDate }}</div>
                </div>
            </div>
            <div class="content">
                {{ props.hotComment.comment.commentDetail }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    hotComment: {
        type: Object,
        default: () => ({})
    }
})
const starValue = ref(props.hotComment.overall);
// console.log(props.hotComment)
</script>

<style lang="less" scoped>
.Comment {
    .info {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding-bottom: 13px;

        .summary {
            display: flex;
            align-items: center;
            justify-content: left;

            .overall {
                font-size: 48px;
                font-weight: 700;
                color: #333;
                text-decoration: underline var(--primary-color);
            }

            .otherComment {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                margin-left: 10px;

                .scoreTitle {
                    font-size: 12px;
                    color: #333;
                    margin-bottom: 3px;
                }

                .totalCount {
                    font-size: 12px;
                    color: #999;
                    margin-bottom: 3px;
                }
            }

        }

        .summaryTag {
            display: grid;
            grid-template-columns: auto auto;
            color: #999;
            font-size: 12px;

            .item2 {
                margin: 0 2px 2px 0;
            }
        }
    }

    .tag {
        display: flex;
        flex-wrap: wrap;
        margin: 3px 0;

        .item {
            font-size: 12px;
            margin: 0 4px 4px 0;
            padding: 4px 8px;
            border-radius: 7px;
        }
    }

    .comment {
        background-color: #f7f9fb;
        margin: 8px 0 0;
        padding: 12px;

        .user {
            display: flex;
            justify-content: left;
            align-items: center;

            .img {
                width: 40px;

                img {
                    width: 100%;
                    border-radius: 50%;
                }
            }

            .name {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                margin-left: 5px;

                .userName {
                    font-weight: 600;
                    color: #333;
                    margin-bottom: 3px;
                }

                .time {
                    color: #999;
                }
            }


        }

        .content {
            color: #333;
            font-size: 12px;
            margin: 10px 0;
        }
    }
}
</style>